<template>
	<div>
		<div class="navHeaderContent">
			<div class="navHeaderCenter">
				<el-row :gutter="20">
					<!--logo-->
					<el-col :span="5">
						<div class="grid-content nav_height_60 margin_left_10 bg-purple cursor_pointer" @click="goHome()">
							<img class="navLogoImage" src="../assets/images/logo.png" alt="" />
						</div>
					</el-col>
					<!--时间-->
					<el-col :span="9" v-show="!isLoginRegister">
						<div class="grid-content nav_height_60 time_stamp text_align_right">
							<span>{{timeStampNum}}</span>
						</div>
					</el-col>
					<!--个人信息 姓名-->
					<el-col :span="10" style="float: right;">
						<div class="grid_content nav_height_60">
							<!--登录 注册 按钮-->
							<el-col :span="7" class="user_login_register nav_height_60" v-show="isLoginRegister">
								<el-col :span="12" class="text_align_center">
									<span class="loginBtn cursor_pointer" @click="login()">登录</span>
								</el-col>
								<el-col :span="12" class="text_align_center">
									<span class="registerBtn cursor_pointer" @click="register()">注册</span>
								</el-col>
							</el-col>
							<!--登录后 用户信息-->
							<el-col :span="15" class="user_info nav_height_60" v-show="!isLoginRegister">
								<!--用户头像-->
								<el-col :span="6" class="padding_right_0">
									<div class="user_icon">
										<img v-bind:src="headPortraitUrl" style="border-radius: 50%;"/>
									</div>
								</el-col>
								<!--用户昵称-->
								<el-col :span="8" class="text_align_left padding_left_0">
									<div>
										<el-dropdown @command="handleCommand" class="user_name font_size_16">
											<span class="el-dropdown-link cursor_pointer">
											   	{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
											</span>
											<el-dropdown-menu slot="dropdown" style="margin-top: -10px;">
												<el-dropdown-item command="UserInfo">个人中心</el-dropdown-item>
												<el-dropdown-item command="LoginOut">退出</el-dropdown-item>
											</el-dropdown-menu>
										</el-dropdown>
									</div>
								</el-col>
								<!--购物车-->
								<el-col :span="6" class="cursor_pointer">
									<div class="user_cart" @click="clickCart()">
										<img src="../assets/images/cart.png" />
									</div>
									<span class="goodsNumber text_align_center" @click="clickCart()">{{cartNum}}</span>
								</el-col>
							</el-col>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<style>
	.navHeaderContent {
		width: 100%;
		margin: 0px auto;
		background-color: rgb(84, 92, 100);
	}
	
	.navHeaderCenter {
		width: 1200px;
		height: 60px;
		margin: 0px auto;
	}
	
	.anvBreadcrumb {}
	
	.navLogoImage {
		width: 180px;
		height: 39px;
		margin-top: 10px;
	}
	
	.grid_content {
		width: 100%;
	}
	
	.nav_height_60 {
		height: 60px;
		line-height: 60px;
	}
	
	.user_login_register {
		float: right;
		color: #FFFFFF;
		margin-right: 20px;
	}
	
	.user_info {
		float: right;
		color: #FFFFFF;
		/*background: palegreen;*/
		margin-right: 20px;
	}
	
	.user_icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-top: 10px;
		margin-left: 7px;
	}
	
	.user_cart {
		width: 35px;
		height: 35px;
		margin-top: 13px;
		margin-left: 7px;
		transition: All 0.4s ease-in-out;
		-webkit-transition: All 0.4s ease-in-out;
		-moz-transition: All 0.4s ease-in-out;
		-o-transition: All 0.4s ease-in-out;
	}
	
	.user_cart:hover {
		transform: rotate(15deg);
		-webkit-transform: rotate(15deg);
		-moz-transform: rotate(15deg);
		-o-transform: rotate(15deg);
		-ms-transform: rotate(15deg);
	}
	
	.goodsNumber {
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 50%;
		background: #DA552F;
		position: absolute;
		top: 5px;
		right: 90px;
	}
	
	.user_icon img,
	.user_cart img {
		width: 100%;
		height: 100%;
	}
	
	.user_name {
		width: 100%;
		color: #FFFFFF;
	}
	
	.time_stamp {
		color: #FFFFFF;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
</style>

<script type="text/ecmascript-6">
	import axios from "axios"
	import { getCookies } from "./../util/getCookie.js"
	export default {
		data() {
			return {
				isLoginRegister: true,
				//时间显示
				timeStampNum: "",
				//购物车数量
				cartNum: 10,
				//用户名
				userName: "",
				//用户头像
				headPortraitUrl: ""
			};
		},
		components: {

		},
		mounted: function() {
			this.timeStamp(new Date());
			setInterval(() => {
				this.timeStamp(new Date());
			}, 1000);
			this.init(getCookies("userId"));
		},
		computed: {

		},
		methods: {
			//初始化
			init(userID) {
				if (userID === "undefined") {
					return;
				}
				axios.get("/users/getUserData", {
					params: {
						userId: userID
					}
				}).then((response) => {
					var data = response.data.result;
					if(response.data.status == 0) {
						this.isLoginRegister = false;
						this.userName = data.userName;
						this.cartNum = data.cartList.length;
						this.headPortraitUrl = data.userHeadPortraitUrl == "" ? "../../static/images/" + data.userDefaultHeadPortrait : "../../static/public/uploadImage/" + data.userHeadPortraitUrl;
					}
				});
			},
			//时间显示
			timeStamp(date) {
				if(typeof date === "string") {
					return;
				}
				var dayArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var hour = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				var day = date.getDay();

				this.timeStampNum = y + " / " + m + " / " + d + " " + (hour < 10 ? ("0" + hour) : hour) + ":" + (minutes < 10 ? ("0" + minutes) : minutes) + ":" + (seconds < 10 ? ("0" + seconds) : seconds) + " " + dayArr[day]
			},
			//name下拉 选择
			handleCommand(command) {
				//退出
				if(command == "LoginOut") {
					this.isLoginRegister = true;
					this.cartNum = "";
					axios.post("/users/userLoginOut", {}).then((response) =>{
						var data = response.data;
						if (data.status == 0) {
							this.$router.push({
								path: "/"
							});
						}
					});
				}
				//用户信息
				if(command == "UserInfo") {
					this.$router.push({
						path: "/PersonalData"
					});
				}
			},
			// 点击logo 回到首页
			goHome() {
				this.$router.push({
					path: "/"
				});
			},
			//购物车
			clickCart() {
				this.$router.push({
					path: "/Cart?" + (new Date()).getTime()
				});
			},
			//登录
			login() {
				this.$router.push({
					path: "/Login"
				});
			},
			//注册
			register() {
				this.$router.push({
					path: "/Register"
				});
			}
		}
	}
</script>